<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch" action="${request.getContextPath()}/QCFinished/qCFinished" method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="SYS_QUERY_NAME" value="qCFinished" />
            <g:hiddenField name="EXPORT_CONTENT_NAME" value="Excel" />
            <label >分类：</label>&nbsp;
        <g:select name="name" from="${typeList}" data-toggle="selectpicker" data-live-search="true" optionKey="name" optionValue="name" value="${name}" noSelection="['':'ALL']"    />&nbsp;
            <label >时间：</label>&nbsp;
            <input type="text" name="startTime" value="${startTime}" data-rule="required" data-pattern="yyyy-MM-dd"  data-toggle="datepicker" placeholder="FROM">&nbsp;
            <input type="text" name="endTime" value="${endTime}" data-rule="required" data-pattern="yyyy-MM-dd" data-toggle="datepicker" placeholder="TO">&nbsp;&nbsp;
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
            <button type="button" class="btn-blue" onclick="javascript:bjuiExportExl('#pagerForm','${request.getContextPath()}/BadProcessAnalysis /exportExcel')" data-icon="file-excel-o" title="导出Excel">导出</button>&nbsp;
        </div>
    </form>
</div>

<div class="bjui-pageContent">
<g:if test="${qCFinished.size() > 0}">
    <div id="qCFinished" style="width:100%;height: 600px" ></div>
    <script  src="${request.getContextPath()}/js/echarts/echarts.js"></script>
    <script  src="${request.getContextPath()}/js/echarts/echarts-tool.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var contextPath = "${request.getContextPath()}";
        eChartsTool.init(contextPath);
        var data=[];
        <g:each in="${qCFinished}" status="i" var="tableInstance">
        data.push('${tableInstance.TRANS_TIME}');
        </g:each>

        // 指定图表的配置项和数据
        var option = {
            /*backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色*/
            // 图表标题
            toolbox: {

                show: true,

                feature: {

                    saveAsImage: {

                        show: true,

                        excludeComponents: ['toolbox'],

                        pixelRatio: 2

                    }
                }

            },
            title: {

            },

            tooltip : {
                trigger: ''
            },

            legend: {
                data:['数量','占比']

            },
            xAxis: {
                data:data,
                axisLabel : {//坐标轴刻度标签的相关设置。
                    interval:0,
                    rotate:"45"
                }
            },
            yAxis : [
                {
                    type : 'value'
                },
                {
                    type : 'value',
                    name:'占比',

                    axisLabel : {
                        formatter: '{value}%'
                    },
                    show:true
                }
            ],
            series : [
                {
                    name: '数量',
                    type: 'bar',
                    data:${qCFinished.MAIN_QTY}

                },
                {
                    name: '占比',
                    type: 'line',
                    data:${qCFinished.YIELD},
                    yAxisIndex: 1
                }]
        };
        // 使用刚指定的配置项和数据显示图表。
        eChartsTool.setOption("roma", document.getElementById('qCFinished'), option);
    </script>
</g:if>
    <div style="margin:15px auto; width:96%;">
        <div class="row" style="padding: 0px 0px;">
            <div class="col-md-12" >
    <g:if test="${qCFinished.size() > 0}">
        <table id="lapEndByBatch" data-toggle="tablefixed" data-width="100%" data-nowrap="true">
            <thead>
            <tr id="t1">
                <g:each in="${tableHeadList}" status="j" var="headInstance">
                    <g:if test="${headInstance!='RN'}">
                        <th  width="125"><g:message code="${headInstance}" default="${headInstance}"/></th>
                    </g:if>
                </g:each>
            </tr>
            </thead>
            <tbody>
            <g:if test="${qCFinished.size()>0}">
                <g:each in="${qCFinished}" status="i" var="dataInstance">
                    <tr>
                        <g:each in="${tableHeadList}" status="j" var="headInstance">
                            <g:if test="${headInstance!='RN'}">
                                <td>${dataInstance["${headInstance}"]}</td>
                            </g:if>
                        </g:each>
                    </tr>
                </g:each>

            </g:if>
            <g:else>
                <g:render template="../template/emptyPanel" />
            </g:else>
            </tbody>
        </table>
    </g:if>
</div>
        </div>
    </div>
</div>


